<template>
  <div class="tool-base64">
    <div>
      <el-input
          v-model="baseText"
          :rows="8"
          type="textarea"
          placeholder="请输入待解码内容..."/>
    </div>
    <div class="tool-oper">
      <el-button type="primary" @click="base64decode">解码</el-button>
      <el-button @click="base64Encode()">编码</el-button>
      <el-button @click="clearCode()">清空</el-button>
    </div>
    <div>
      <el-input
          v-model="unbaseText"
          :rows="18"
          type="textarea"
          placeholder="请输待编码内容..."/>
    </div>
  </div>
</template>
<script setup lang="ts">
import {ref, onMounted} from 'vue'
import {Base64} from 'js-base64'

const baseText = ref('')
const unbaseText = ref('')

// 编码
const base64Encode = () => {
  baseText.value = Base64.encode(unbaseText.value)
}

// 解码
const base64decode = () => {
  unbaseText.value = Base64.decode(baseText.value)
}

// 清空
const clearCode = () => {
  baseText.value = ''
  unbaseText.value = ''
}

</script>
<style scoped lang="scss">
  .tool-base64 {
    height: calc(100vh - 36px);
    padding: 10px;

    .tool-oper {
      margin: 10px 0;
    }
  }
</style>